<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <el-dialog width="60%" :visible.sync="Dialog" @close="closeDialog" append-to-body :close-on-click-modal="false">
      <div slot="title" class="clearfix">
        <div class="title">
          <img class="title_img" src="../../../../../assets/img/icon.png" alt="" srcset="" />
          <span class="title_left">{{ title_l }}</span>
        </div>
        <span class="title_top">{{ title }}</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前状态：</span>
                <span class="title_value" :style="{ color: getHeadColor(info.stateCode) }">
                  {{ getHeadName(info.stateCode) }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>车台号：</span>
                <span class="title_value">{{ info.devSn }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>品种：</span>
                <span class="title_value">{{ info.pz || data.pz }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>总产：</span>
                <span class="title_value">{{ !info.zcd || info.zcd == "None" ? 0 : info.zcd }}米</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当班产量(KG)：</span>
                <span class="title_value">
                  {{ !info.dqsjcl || info.dqsjcl == "None" ? 0 : info.dqsjcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前理论产量(KG)：</span>
                <span class="title_value">
                  {{ !info.dqllcl || info.dqllcl == "None" ? 0 : info.dqllcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当班长度(米)：</span>
                <span class="title_value">
                  {{ !info.a_zcd || info.a_zcd == "None" ? 0 : info.a_zcd | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>速度：</span>
                <span class="title_value">{{ !info.sd || info.sd == "None" ? 0 : info.sd }}米/分</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>余长：</span>
                <span class="title_value">{{ !info.yc || info.yc == "None" ? 0 : info.yc }}米</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>低速速度：</span>
                <span class="title_value">{{ !info.dssd || info.dssd == "None" ? 0 : info.dssd }}米/分</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>满筒长度：</span>
                <span class="title_value">{{ !info.dc || info.dc == "None" ? 0 : info.dc }}米</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>挡车工：</span>
                <span class="title_value">{{ this.peopleList[Math.round(Math.random() * 40)].dcg }}</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="echarts">
                <div ref="lulotongEcharts1" style="width: 100%; height: 100%"></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="echarts">
                <div ref="lulotongEcharts2" style="width: 100%; height: 100%"></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/zjgh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="tableData" style="width: 100%" height="150" size="mini">
              <el-table-column prop="code" label="专件编码"></el-table-column>
              <el-table-column prop="desc" label="专件描述"></el-table-column>
              <el-table-column prop="date" label="上车时间" width="160px"></el-table-column>
              <el-table-column prop="num" label="数量"></el-table-column>
              <el-table-column prop="day" label="剩余天数"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/whjh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="table1Data" style="width: 100%" height="150" size="mini">
              <el-table-column prop="whlx" label="维护类型"></el-table-column>
              <el-table-column prop="dqjh" label="当前计划"></el-table-column>
              <el-table-column prop="sfwc" label="是否完成"></el-table-column>
              <el-table-column prop="xcjh" label="下次计划"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import people from "@/assets/data/people.json";
export default {
  name: "dialog_jingtiao",
  data() {
    return {
      info: {},
      Dialog: false,
      title: "",
      peopleList: [],
      title_l: "",
      ctsd: 0,
      xiaoLv: 0,
      data: "",
      tableData: [
        {
          code: "ZK101",
          desc: "并条",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },
        {
          code: "ZK101",
          desc: "并条",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK101",
          desc: "并条",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK101",
          desc: "并条",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        }
      ],
      table1Data: [
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        }
      ]
    };
  },

  created() {
    this.peopleList = people;
  },
  filters: {
    floatFormatter(value) {
      if (value) {
        value = parseFloat(value);
        return value.toFixed(2);
      } else {
        return 0;
      }
    }
  },
  computed: {
    bingTiaoNewestState() {
      return this.$store.state.bingTiaoNewestState;
    }
  },
  watch: {
    bingTiaoNewestState: {
      immediate: true,
      handler(val) {
        if (val.data) {
          this.info = val.data;
          this.info.stateCode = val.data.stateCode;
          this.ctsd = parseInt(val.data.sd);
          this.$nextTick(() => {
            this.init1();
            this.init2();
          });
        } else {
          this.info = {};
          this.ctsd = 0;
          this.$nextTick(() => {
            this.init1();
            this.init2();
          });
        }
      }
    }
  },
  methods: {
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "#02DE6D";
        //停止
        case 2:
          return "#FF3C00";
        //故障
        case 3:
          return "#FF9902";
        //满纱满桶
        case 4:
          return "#00D8D3";
        //通讯失败
        case 5:
          return "#B8B8B8";
        // 计划停台
        case 6:
          return "rgb(255,233,34)";
        default:
          return "#B8B8B8";
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯故障";
        // 计划停台
        case 6:
          return "计划停台";
        default:
          return "通讯故障";
      }
    },
    closeDialog() {
      this.info = {};
      this.ctsd = 0;
      this.$parent.closeHandle("secBingTiaoTimer");
    },
    showDialog(data) {
      this.data = data;
      var title = Number(data.devSn) > 99 ? "头并条机" + (Number(data.devSn) - 100) : "末并条机" + Number(data.devSn);
      this.title = title + "JWF1009 详情";
      this.title_l = title;
      this.xiaoLv = Number(data.devSn) > 99 ? Number(data.xiaolv) * 100 : Number(data.xiaolv);
      this.Dialog = true;
    },
    init1() {
      if (this.$refs.lulotongEcharts1) {
        var lulotongEcharts1 = this.$echarts.init(this.$refs.lulotongEcharts1);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 500,
              itemStyle: {
                color: "#58D9F9",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 20,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function(value) {
                  return Math.round(value) + "M/min";
                }
              },

              data: [
                {
                  name: "出条速度",
                  value: this.ctsd ? this.ctsd : 0
                }
              ]
            }
          ]
        };

        lulotongEcharts1.setOption(option);
        window.addEventListener("resize", function() {
          lulotongEcharts1.resize();
        });
      }
    },
    init2() {
      if (this.$refs.lulotongEcharts2) {
        var lulotongEcharts2 = this.$echarts.init(this.$refs.lulotongEcharts2);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 100,
              itemStyle: {
                color: "rgb(128,246,217)",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 28,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function(value) {
                  return Math.round(value) + "%";
                }
              },

              data: [
                {
                  name: "效率",
                  value: this.xiaoLv ? this.xiaoLv : 0
                }
              ]
            }
          ]
        };

        lulotongEcharts2.setOption(option);
        window.addEventListener("resize", function() {
          lulotongEcharts2.resize();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 180px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>
